<template>
    <div class="homePage">
        <van-sidebar v-model="cateData.active" class="cateCnt">
            <van-sidebar-item
                v-for="(cate, index) in cateData.list"
                :key="'cate1-' + index"
                :title="cate.name"
                @click="foodContentScroll(index)"
            />
        </van-sidebar>
        <div class="foodCnt" ref="foodCntDom">
            <template v-if="foodList.length">
                <div v-for="(cate, index) in cateData.list" :key="'cate2-' + index">
                    <p
                        class="p-left-sm p-top-lg p-bottom-xs color-gray"
                        :ref="
                            (el) => {
                                el && (cateTitleDom[index] = el);
                            }
                        "
                    >
                        {{ cate.name }}
                    </p>
                    <FoodCard
                        v-for="(food, index) in getCateFoodList(cate.id)"
                        :key="'food-' + index"
                        :food="food"
                    />
                </div>
            </template>
            <van-empty v-else description="暂无菜品" />
        </div>
    </div>

    <OrderSubmitBar />
</template>

<script>
import { reactive, ref, computed, nextTick } from 'vue';
import { useStore } from 'vuex';
import axios from 'axios';
// import { Toast } from 'vant';

import FoodCard from '@/components/FoodCard';
import OrderSubmitBar from './components/OrderSubmitBar';

import { getAllList } from '@/api/home';

export default {
    components: { FoodCard, OrderSubmitBar },
    setup() {
        const store = useStore();

        const cateData = reactive({
            active: 0,
            list: [],
        });
        const foodList = computed(() => store.state.order.foodList);
        const foodCntDom = ref(null);
        const cateTitleDom = ref([]);
        getAllList().then(
            axios.spread((cates, foods) => {
                cateData.list = cates;

                foods.forEach((food) => {
                    food.orderNumber = 0;
                });
                store.commit('order/setFoodList', foods);
            })
        );

        const getCateFoodList = (cateId) => {
            return foodList.value.filter((food) => food.cateId === cateId);
        };
        const foodContentScroll = (index) => {
            nextTick(() => {
                // console.log(cateTitleDom.value[index].offsetTop);
                const offsetTop = cateTitleDom.value[index].offsetTop;
                foodCntDom.value.scrollTop = offsetTop;
            });
        };

        return {
            cateData,
            foodList,
            foodCntDom,
            cateTitleDom,

            getCateFoodList,
            foodContentScroll,
        };
    },
};
</script>

<style scoped>
.homePage {
    position: relative;
    padding-left: 80px;
    overflow: hidden;
}
.homePage,
.foodCnt {
    height: calc(100vh - 50px);
}
.cateCnt {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
}
.foodCnt {
    overflow-x: hidden;
    overflow-y: auto;
}

.food-img {
    display: block;
    width: 80px;
    height: 80px;
    margin-right: 10px;
}
</style>
